<template>
        <div class="photoinfo-container">
            <h1 class="title">{{photoInfo.title}}</h1>
            <p class="subTitle">
                <span>发表时间：{{photoInfo.add_time |dataFormat}}</span>
                <span>浏览量：{{photoInfo.click}}次</span>
            </p>
            <hr/>
            <!--放置图片区域-->
            <div class="thumbs">
                <!--这里出现的问题是当进入详情界面时，图片的大小无法修改，设置全局的文件即可修改-->
                <vue-preview :slides="list"  @close="handleClose" ></vue-preview>
            </div>

            <div class="content" v-html="photoInfo.content"></div>
            <comment-box :id="this.id"></comment-box>
        </div>

</template>

<script>
    import comment from '../subcomponents/Comment.vue'
    export default {
        name: "PhotoInfo",
        data(){
            return{
                id:this.$route.params.id,
                photoInfo:{},
                list:[]
            }
        },
        created(){
            this.getphotoInfo();
            this.getThumbs();
        },
        methods:{
            getphotoInfo(){
                this.$http.get('api/getimageinfo/'+this.id).then(result=>{
                    console.log(result.body.message[0]);
                    this.photoInfo=result.body.message[0];
                })
            },
            getThumbs(){
              this.$http.get('api/getthumimages/'+this.id).then(result=>{
                  console.log(result.body.message);
                  result.body.message.forEach(item=>{
                      item.msrc=item.src
                      item.w=600;
                      item.h=400;
                  });
                  console.log(result.body.message);
                  this.list=result.body.message;
              })
            },
            handleClose () {
                console.log('close event')
            }
        },
        components:{
            "comment-box":comment
        }
    }
</script>

<style scoped>
    .photoinfo-container{
        padding: 0 4px;
    }
    .photoinfo-container .title{
        text-align: center;
        font-size: 16px;
        margin: 15px 0px;
        color: red;
    }
    .photoinfo-container .subTitle{
        font-size: 12px;
        color: #22a6ff;
        display: flex;
        justify-content: space-between;
    }
    .photoinfo-container .content{
        font-size: 12px;
       line-height: 30px;
    }
    .photoinfo-container .content img{
        width: 100%;
    }

</style>